<script setup lang="jsx">
import { computed, nextTick, ref } from 'vue';
import dayjs from 'dayjs';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
import {
  addPressProgramRule,
  auditPressProgramRule,
  cancelAuditPressProgramRule,
  deletePressProgramRule,
  updatePressProgramRule
} from '@/service/api/modules/issuance-management/press-program-rule';

const useModal = window.$useModal;
const searchParams = ref({
  moduleNo: null,
  tg: null,
  innerCopperThickness: null,
  outerPpNum: null,
  outerPpSpe: null,
  pressingProgramNo: null,
  time: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '产品类型',
    placeholder: '请输入产品类型',
    span: 6,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'input',
    key: 'tg',
    label: 'Tg',
    placeholder: '请输入规则2Tg',
    span: 6,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'input',
    key: 'innerCopperThickness',
    label: '内层铜厚',
    placeholder: '请输入内层铜厚',
    span: 6,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'input',
    key: 'outerPpNum',
    label: '次外层PP张数',
    placeholder: '请输入次外层PP张数',
    span: 6,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'input',
    key: 'outerPpSpe',
    label: '次外层PP规格',
    placeholder: '请输入次外层PP规格',
    span: 6,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'input',
    key: 'pressingProgramNo',
    label: '选用程式命名',
    placeholder: '请输入选用程式命名',
    span: 6,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true,
    fixed: 'left'
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '产品类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150,
    fixed: 'left'
  },
  {
    key: 'tg',
    dataIndex: 'tg',
    title: 'Tg',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'innerCopperThickness',
    dataIndex: 'innerCopperThickness',
    title: '内层铜厚',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'outerPpNum',
    dataIndex: 'outerPpNum',
    title: '次外层PP张数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'outerPpSpe',
    dataIndex: 'outerPpSpe',
    title: '次外层PP规格',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'pressingProgramNo',
    dataIndex: 'pressingProgramNo',
    title: '选用程式命名',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '审核状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100,
    customRender: ({ record }) => {
      return ['未审核', '已审核'][record.state] || '';
    }
  },
  {
    key: 'examiner',
    dataIndex: 'examiner',
    title: '审核人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'examinerTime',
    dataIndex: 'examinerTime',
    title: '审核时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 170
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 170
  },
  {
    key: 'updateBy',
    dataIndex: 'updateBy',
    title: '修改人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '修改时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 170
  }
];
const tableRef = ref(null);

const tabaleSelect = ref([]);
function tableSelectChange(val) {
  tabaleSelect.value = val;
}
function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      moduleNo: null,
      tg: null,
      innerCopperThickness: null,
      outerPpNum: null,
      outerPpSpe: null,
      pressingProgramNo: null,
      time: null
    };
    search();
  });
}

const operationType = ref('add');

const { handleShow, handleLoading, handleClose, updateModalOptions } = useModal({
  modalOption: {
    width: '800px',
    title: '压合程式选用规则新增'
  },
  formList: [
    {
      type: 'input',
      key: 'moduleNo',
      label: '产品类型',
      placeholder: '请输入产品类型',
      span: 24
    },
    {
      type: 'input',
      key: 'tg',
      label: 'Tg',
      placeholder: '请输入Tg',
      span: 24
    },
    {
      type: 'input',
      key: 'innerCopperThickness',
      label: '内层铜厚',
      placeholder: '请输入内层铜厚',
      span: 24
    },
    {
      type: 'input',
      key: 'outerPpNum',
      label: '次外层PP张数',
      placeholder: '请输入次外层PP张数',
      span: 24
    },
    {
      type: 'input',
      key: 'outerPpSpe',
      label: '次外层PP规格',
      placeholder: '请输入次外层PP规格',
      span: 24
    },
    {
      type: 'input',
      key: 'pressingProgramNo',
      label: '选用程式命名',
      placeholder: '请输入选用程式命名',
      span: 24
    }
  ],
  formData: {
    moduleNo: null,
    tg: null,
    innerCopperThickness: null,
    outerPpNum: null,
    outerPpSpe: null,
    pressingProgramNo: null
  },
  onOk: formData => {
    console.log(formData);
    let pro;
    const params = { ...formData };
    const transformKeys = ['tg', 'innerCopperThickness', 'outerPpNum', 'outerPpSpe'];

    transformKeys.forEach(key => {
      if (params[key]) {
        params[key] = encodeURIComponent(params[key]);
      }
    });

    if (operationType.value === 'add') {
      pro = addPressProgramRule(params);
    } else {
      pro = updatePressProgramRule(params);
    }
    handleLoading(true);
    pro
      .then(({ error }) => {
        if (!error) {
          window.$message.success(`${operationType.value === 'add' ? '新增' : '修改'}成功`);
          reset();
          handleClose();
        }
      })
      .finally(() => handleLoading(false));
  }
});

function handleAdd(row) {
  if (row) {
    operationType.value = 'edit';
    updateModalOptions({
      title: '压合程式选用规则修改'
    });
    handleShow(row);
  } else {
    operationType.value = 'add';
    updateModalOptions({
      title: '压合程式选用规则新增'
    });
    handleShow({
      moduleNo: null,
      tg: null,
      innerCopperThickness: null,
      outerPpNum: null,
      outerPpSpe: null,
      pressingProgramNo: null
    });
  }
}

function handelExamine() {
  window.$modal.confirm({
    title: '确认审核选中的数据吗？',
    onOk: () => {
      auditPressProgramRule(tabaleSelect.value).then(({ error }) => {
        if (!error) {
          window.$message.success('审核成功');
          reset();
        }
      });
    },
    onCancel: () => {}
  });
}

function handelWithdrawTrial() {
  window.$modal.confirm({
    title: '确认撤审选中的数据吗？',
    onOk: () => {
      cancelAuditPressProgramRule(tabaleSelect.value).then(({ error }) => {
        if (!error) {
          window.$message.success('撤审成功');
          reset();
        }
      });
    },
    onCancel: () => {}
  });
}

function handelDel() {
  window.$modal.confirm({
    title: '确认删除选中的数据吗？',
    onOk: () => {
      deletePressProgramRule(tabaleSelect.value).then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          reset();
        }
      });
    },
    onCancel: () => {}
  });
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      show-row-selection
      auto-generate-uuid
      row-key="screenId"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/pressingProgramRule/pageList"
      @table-select-change="tableSelectChange"
    >
      <template #title>
        <AButton
          v-hasAuth="['issuance-management:press-fit:press-program-rule:add']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          @click="handleAdd(null)"
        >
          <template #icon>
            <PlusOutlined class="align-sub" />
          </template>
          新增
        </AButton>
        <AButton
          v-hasAuth="['issuance-management:press-fit:press-program-rule:update']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="tabaleSelect.length != 1"
          @click="handleAdd(tabaleSelect[0])"
        >
          <template #icon>
            <EditOutlined class="align-sub" />
          </template>
          修改
        </AButton>

        <AButton
          v-hasAuth="['issuance-management:press-fit:press-program-rule:delete']"
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          删除
        </AButton>

        <AButton
          v-hasAuth="['issuance-management:press-fit:press-program-rule:examine']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelExamine"
        >
          <template #icon>
            <span class="iconfont icon-shenhe" style="font-size: 14px"></span>
          </template>
          审核
        </AButton>

        <AButton
          v-hasAuth="['issuance-management:press-fit:press-program-rule:withdrawTrial']"
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelWithdrawTrial"
        >
          <template #icon>
            <span class="iconfont icon-cheshenanniu" style="font-size: 14px"></span>
          </template>
          <span class="ml-3px">撤审</span>
        </AButton>
      </template>
    </Table>
  </div>
</template>

<style scoped lang="scss"></style>
